{% extends "mobile/base.html" %}
{% load static from staticfiles %}

{% block mobilebody %}
<div class="sortContent line">
            <!--产品列表-->
            <ol class="list-content" id="list-content1" style="display:none;">
            	{% for foods in foodslist %}
                <li class="line">
                    <a href="#">
                        <div class="pro-img"><img src="/static/uploads/product/{{foods.cover_pic}}" alt=""></div>
                        <div class="pro-con"><h3>{{foods.name}}</h3><b>¥{{foods.price}}</b></div>
                    </a>
                    <a href="javascript:doCartAdd(1)" class="list-cart"><i class="icon-cartadd"></i></a>
                </li>
                {% endfor %}
                <li class="line">
                    <a href="#">
                        <div class="pro-img"><img src="{% static 'mobile/img/img05.jpg'%}" alt=""></div>
                        <div class="pro-con"><h3>乌拉圭进口牛肋条</h3><font>BTV推荐，全网独家热销</font><b>¥59.00</b><p>乐果派旗舰店</p></div>
                    </a>
                    <a href="javascript:doCartAdd(2)" class="list-cart"><i class="icon-cartadd"></i></a>
                </li>
                <li class="line">
                    <a href="#">
                        <div class="pro-img"><img src="{% static 'mobile/img/img12.jpg'%}" alt=""></div>
                        <div class="pro-con"><h3>智利肋排脆骨 1kg/袋</h3><b>¥56.60</b><p>乐果派旗舰店</p></div>
                    </a>
                    <a href="javascript:doCartAdd(3)" class="list-cart"><i class="icon-cartadd"></i></a>
                </li>
                <li class="line">
                    <a href="#">
                        <div class="pro-img"><img src="{% static 'mobile/img/img28.jpg'%}" alt=""></div>
                        <div class="pro-con"><h3>温氏 农养鸡 袋装 （800g）</h3><b>¥38.80</b><p>乐果派旗舰店</p></div>
                    </a>
                    <a href="javascript:doCartAdd(4)" class="list-cart"><i class="icon-cartadd"></i></a>
                </li>
            </ol>
            <ol class="list-content" id="list-content2" style="display:none;">
                <li class="line">
                    <a href="#">
                        <div class="pro-img"><img src="{% static 'mobile/img/img29.jpg'%}" alt=""></div>
                        <div class="pro-con"><h3>江西萍乡土鸡蛋</h3><font>林地散养，原粮喂养，蛋黄大，蛋清粘稠</font><b>¥12.80</b><p>乐果派旗舰店</p></div>
                    </a>
                    <a href="#" class="list-cart"><i class="icon-cartadd"></i></a>
                </li>
                <li class="line">
                    <a href="#">
                        <div class="pro-img"><img src="{% static 'mobile/img/img30.jpg'%}" alt=""></div>
                        <div class="pro-con"><h3>台湾皮蛋，松花蛋</h3><font></font><b>¥28.00<s>¥31.90</s></b><p>乐果派旗舰店</p></div>
                    </a>
                    <a href="#" class="list-cart"><i class="icon-cartadd"></i></a>
                </li>
            </ol>
            <ol class="list-content" id="list-content3" style="display:none;">
                <li class="line">
                    <a href="#">
                        <div class="pro-img"><img src="{% static 'mobile/img/img07.jpg'%}" alt=""></div>
                        <div class="pro-con"><h3>萍乡土鸡蛋</h3><font></font><b>¥28.00<s>¥31.90</s></b><p>乐果派旗舰店</p></div>
                    </a>
                    <a href="#" class="list-cart"><i class="icon-cartadd"></i></a>
                </li>
                <li class="line">
                    <a href="#">
                        <div class="pro-img"><img src="{% static 'mobile/img/img16.jpg'%}" alt=""></div>
                        <div class="pro-con"><h3>新鲜猪肉</h3><font></font><b>¥28.00<s>¥31.90</s></b><p>乐果派旗舰店</p></div>
                    </a>
                    <a href="#" class="list-cart"><i class="icon-cartadd"></i></a>
                </li>
                <li class="line">
                    <a href="#">
                        <div class="pro-img"><img src="{% static 'mobile/img/img27.jpg'%}" alt=""></div>
                        <div class="pro-con"><h3>鸡肉</h3><font></font><b>¥28.00<s>¥31.90</s></b><p>乐果派旗舰店</p></div>
                    </a>
                    <a href="#" class="list-cart"><i class="icon-cartadd"></i></a>
                </li>
            </ol>
            <br><br>
        </div>
{% endblock %}
{% block myjs %}
<script type="text/javascript">
    function doselectList(ob,m){
        $("#sortNav a").removeClass("select");
        $(ob).addClass("select");
        $("ol.list-content").hide();
        $("#list-content"+m).show();
        return false;
    }

    cartlist = [];

    function doCartAdd(id){
        shoplist = [{'id':1,'name':'法国猪肋排','cover_pic':'{% static "mobile/img/img25.jpg"%}','price':35.00,'num':1},{'id':2,'name':'乌拉圭进口牛肋条','cover_pic':'{% static "mobile/img/img05.jpg"%}','price':90.00,'num':1}];
        shop = shoplist[id-1];
        var b=true;
        for(var i=0;i<cartlist.length;i++){
            if(cartlist[i].id==id){
                b = false;
                cartlist[i].num += 1;
                break;
            }
        }
        if(b){
            cartlist.push(shop);
        }
        doShowCart();

    }

    function doCartClear(){
        cartlist = [];
        doShowCart();
    }

    function doShowCart(){
        var cartContent = $("#cartContent div.cartContentList ul.line-li");
        cartContent.empty()
        var total = 0.0;
        for(var i=0;i<cartlist.length;i++){
            var str = "<li>";
            str += '<img src="'+cartlist[i].cover_pic+'" alt=""><p>'+cartlist[i].name+'</p><span>¥'+cartlist[i].price+'</span>';
            str += '<div class="D-BuyNum"><button><i class="icon-reduce"></i></button><input type="number" readonly class="line" value="'+cartlist[i].num+'"><button><i class="icon-plus"></i></button></div>'
            str += "</li>";
            cartContent.append(str);
            total += cartlist[i].price * cartlist[i].num; 
        }
        $("#cartContent div.LayerFooter span").html("￥"+total);
        $("#orderCart i.icon-cart span").html(cartlist.length);
    }



</script>
{% endblock %}